<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       <div id="root">
            <h2>人员列表-遍历数组</h2>
            <input type="text" placeholder="输入" v-model="keyWord">
            <br/>
            <div>computed实现</div>
            <ul>
                <li v-for="(p,key) in filterPersons" :key="p.id">
                    {{p.name}}-{{p.age}}--{{key}}
                </li>
            </ul>
            <br/>
            <button @click="sortType=2">年龄升序</button>
            <button @click="sortType=1">年龄降序</button>
            <button @click="sortType=0">年龄原来</button>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            new Vue({
                el: '#root', 
                data(){
                    return {
                        persons:[
                            {id:'001',name:'马冬梅',age:1 ,sex:'女'},
                            {id:'002',name:'周冬雨',age:3,sex:'女'},
                            {id:'003',name:'周杰伦',age:4,sex:'男'},
                            {id:'004',name:'温兆伦',age:2,sex:'男'},
                        ],
                        keyWord:'',
                        sortType:0,
                    }
                },
                computed: {
                    filterPersons() {
                        const arr = this.persons.filter(p => p.name && p.name.includes(this.keyWord))
                        if(this.sortType==0){
                            return arr
                        }else if(this.sortType==1){//降序
                            return arr.sort((a,b)=>b.age-a.age)
                        }else if(this.sortType==2){//升序
                            return arr.sort((a,b)=>a.age-b.age)
                        }
                    }
                },
                method:{
                    
                }
            })
        </script>
    </body>
</html>
